<template>
  <div class="moudel-review">
<!--     <div class="nav-header">
      <span class="review-num">商品评价({{list.length}})</span>
      <span class="look-all">查看全部评价</span>
    </div> -->
    <div class="list-wrap">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="review-header">
          <img class="avatar" :src="item.avatar" alt="">
          <td class="middle">
            <tr class="name">{{item.name}}</tr>
            <tr class="star"><rater :value="item.commentStar" active-color="#F7A700" :disabled="false" :font-size="10"></rater><span class="star-text">{{item.commentStar>3?'满意':'失望'}}</span></tr>
          </td>
          <div class="date">{{item.commentTime}}</div> 
        </div>
        <div class="review-content">
          <p class="review-text">{{item.commentText}}</p>
          <div class="review-img">
            <img :src="img" alt="" v-for="(img, index) in item.commentImgs" :key="index">
          </div>
        </div>
      </div>
      <div v-transfer-dom>
        <previewer :list="list" ref="previewer" :options="options"></previewer>
      </div>
    </div>
  </div>
</template>

<script>
  import { Rater, TransferDom, Previewer } from 'vux'

  export default {
    name: 'moudel-review',
    props: {
      list: {
        type: Array
      }
    },
    directives: {
      TransferDom
    },
    components: {
      Rater,
      Previewer
    },
    data: function() {
      return {
        options: {
          getThumbBoundsFn (index) {
            let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        }
      }
    },
    methods: {
      show(index) {
        this.$refs.previewer.show(index)
      }
    }
  }
</script>

<style lang="less">
  @import (reference) '~COMMON/common.less';

  .moudel-review {
    // margin-top: 10px;
    background-color: #fff;
    // .nav-header {
    //   padding-left: 20px;
    //   padding-right: 15px;
    //   line-height: 35px;
    //   .review-num {
    //     font-size: 14px;
    //     color: #333;
    //   }
    //   .look-all {
    //     float: right;
    //     font-size: 12px;
    //     color: #666;
    //   }
    // }
    .list-wrap {
      .list-item {
        padding: 20px 15px 20px 20px;
        border-bottom: 1px solid #ececec;
        &:nth-of-type(1) {
          padding-top: 10px;
        }
        .review-header {
          .avatar {
            .Round(32px);
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
          }
          .middle {
            display: inline-block;
            vertical-align: middle;
            .name {
              line-height: 15px;
              font-size: 13px;
              color: #AAA;
            }
            .star {
              .star-text {
                margin-left: 5px;
                font-size: 10px;
                color: #F5A623;
              }
            }
          }
          .date {
            float: right;
            line-height: 32px;
            font-size: 12px;
            color: #999;
          }
        }
        .review-content {
          .review-text {
            font-size: 14px;
            color: #333;
            line-height: 20px;
            margin-bottom: 15px;
          }
          .review-img {
            >img {
              width: 110px;
              height: 110px;
              margin-right: 7px;
            }
          }
        }
      }
    }
  }
</style>